<template>
	<view class="selectPhone">
		<view class="topBox">
			<view class="title">{{packInfo.pack_name}}</view>
			<view class="textBox mTop2">
				<view class="text">请在下方选择号码，填写入网信息，支付后凭身份证领卡即可</view>
			</view>
		</view>
		
		<view class="searchBox mTop3">
			<view class="search">
				<input class="input flex1" type="number" confirm-type="search" v-model="search" placeholder="搜索号码(2至11位)" placeholder-style="font-size: 24rpx;" @confirm="searchEvent"/>
				<view class="iconBtn" @click="searchEvent(0)">
					<uni-icons type="search" size="20" color="#3e84fd"></uni-icons>
				</view>
			</view>
			<view class="select mTop1 flex_space_a">
				<view class="item" hover-class="select-item__hover"  @click="searchEvent(1)">不带4</view>
				<view class="item" hover-class="select-item__hover"  @click="searchEvent(2)">多带6</view>
				<view class="item" hover-class="select-item__hover"  @click="searchEvent(3)">多带8</view>
				<view class="item" hover-class="select-item__hover"  @click="searchEvent(4)">多带9</view>
			</view>
		</view>
		
		<view class="phoneNumber mTop3">
			<view class="list flex_conter flex_wrap">
				<view class="item"  v-for="(item, index) in phoneList"  :key="index" @click="goPayTel(item.mobile_id)">{{item.mobile_code}}</view>
			</view>
			<!-- <view class="pagination mTop1">
				<page-pagination
				 mode="multi"
				 color="#3e84fd"
				 :showPageSize="50"
				 :showAround="true"
				 :forceEllipses="true"
				 :numAround="true"
				 :showGoPage="true"
				 :total="page.total"
				 :pageSize="page.pageSize"
				 :currentPage="page.currentPage"
				 @change="pageChange"></page-pagination>
			</view> -->
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				search: '',
				page: {
					total: 500,
					pageSize: 50,
					currentPage: 1
				},
				phoneList:[],
				packInfo:[],
				pack_id:'',
				screen:0
			}
		},
		onLoad (e) {
			console.log(e);
			this.pack_id = e.pack_id;
			this.getPack(e.pack_id);
		},
		methods: {
			getPack(pack_id){
				util.requestPost('index/getPack', {pack_id:pack_id,currentPage:this.page.currentPage,pageSize:this.page.pageSize,search:this.search,screen:this.screen}, (res) => {
					if (res.code == 1) {
						console.log(res);
						this.phoneList = res.data.list;
						this.packInfo = res.data.packInfo;
						
						this.page.total = res.data.total;
					} else {
						
					}
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
			searchEvent (screen) {
				if(screen){
					this.screen = screen;
				}
				console.log(this.search);
				this.getPack(this.pack_id);
			},
			pageChange (e) {
				this.page.currentPage = e;
				this.getPack(this.pack_id);
			},
			goPayTel (mobile_id) {
				uni.navigateTo({
					url: `/pages/index/payTel?mobile_id=${mobile_id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.selectPhone {
	padding: 20rpx;
	.topBox {
		color: #FFFFFF;
		padding: 20rpx;
		border-radius: 20rpx;
		background: $btn-bg-color;
		.textBox {
			.text {
				font-size: 26rpx;
			}
		}
	}
	.searchBox {
		.search {
			border: $border-base;
			border-radius: 12rpx;
			display: flex;
			align-items: stretch;
			.input {
				height: 68rpx;
				padding: 0 20rpx;
			}
			.iconBtn {
				width: 100rpx;
				text-align: center;
				line-height: 68rpx;
				border-left: $border-base;
			}
		}
		.select {
			.item {
				width: 150rpx;
				color: #666;
				font-size: 28rpx;
				text-align: center;
				line-height: 52rpx;
				border: $border-base;
				border-radius: 8rpx;
			}
			.select-item__hover {
				color: #fff;
				border-color: $primary-color;
				background-color: $primary-color;
			}
		}
	}
	.phoneNumber {
		.list {
			.item {
				width: 220rpx;
				color: #666;
				font-size: 28rpx;
				text-align: center;
				line-height: 52rpx;
				margin: 0 6rpx 12rpx;
				border: $border-base;
				border-radius: 8rpx;
			}
		}
	}
}
</style>
